<template>
    <h3>vue工程化项目打包</h3>
    <pre class="note">
        1. vue的工程化项目打包，是一个一次性操作，如果后续继续更新代码，需要重新打包
        2. 通过命令 npm run build 可以直接完成当前vue项目的静态编译转换生成对应的静态合并资源
            => src 以内的文件会被整合为
                + js 记录main.js引导的所有组件和JS相关代码
                + css 记录项目所有的样式资源 （打包是才会出现，开发时记录在head中）
                + 资源内容 编译完成路径转换后的相关资源(图片，视频……)
            => node环境中安装的node_modules生产环境的三方功能依赖模块，会被统一整合为chunk-vendors.js
               node_modules 会通过依赖算法进行代码压缩
        3. 生成的文件会自动在项目中构建 dist 文件夹进行记录（通过vue.config.js中outputDir配置可以修改 ）
        4. 项目打包后会在打包控制台生产打包报表
            => 文件资源列表（打包的文件数量和大小）
            <img src="@/assets/error/23.png" alt="" srcset="">
            => 静态资源过大提示（依赖的图片静态资源存在过大情况）
            <img src="@/assets/error/25.png" alt="" srcset="">
            => eslint 语法提示（提示生产环境下需要关闭的相关代码）
            <img src="@/assets/error/24.png" alt="" srcset="">
        5. 同时打包文件中会生成 JS CSS 映射调试文件 map
            => 为生产后的项目进行在线调试提供原码映射支持，方便生产调试
        6. 打包后的项目默认只能运行在服务器根目录下
            => 可以在vue.config.js 配置文件中通过 publicPath 属性统一调整项目运行目录
        7. 当修改了publicPath 之后，开发环境中可以通过服务器根目录访问，也可以通过publicPath指定服务器目录访问
    </pre>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>

</style>